<script setup lang="ts" name="warning-visual">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  onBeforeUnmount,
  reactive,
  ref,
  toRaw,
} from "vue";
import Bus from "@/utils/eventBus";
// import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElTree } from "element-plus";
import {
  getCameraVideoUrl,
  getCameraList_,
  getAllCameraList_,
  getFullDeptTree_,
  getUserVideoUrl,
} from "@/api/server_video";
import { detection, detectionLog } from "@/api/server_warning";
import { detectionlistLog } from "@/api/server_bill";
import mp4a from "../../../assets/image/video.mp4";
import mp4b from "../../../assets/image/4c8f3.mp4";
import mp4c from "../../../assets/image/4c8f2.mp4";
import mp4d from "../../../assets/image/4c8f1.mp4";
import imagge from "../../../assets/image/Snipaste_2022-09-07_17-09-49.png";
const isBig = ref(false);
let filterTimer = ref();
let refTree = ref<InstanceType<typeof ElTree>>();
const lists = reactive([mp4a, mp4b, mp4c, mp4d]);
const cameraList = ref<any[]>([]);
const detectionLogFormList = ref<any[]>([]);
const detectionLogForm = ref<any>({
  page: 1,
  pageSize: 10,
});
const detectionLogFormTatal = ref(0);
const fullDeptTree = ref<any[]>([]);
const searchValue = ref();
const defaultProps = reactive({
  children: "children",
  label: "label",
});

const getCameraList = async () => {
  /* 实时监控 */
  let res = await getCameraList_({
    ...detectionLogForm,
  });
  detectionLogFormList.value = res.list;
};
const getAllCameraList = async () => {
  let res = await getAllCameraList_({});

  if (res.result == "success") cameraList.value = res.list;
};
/* 获取单个摄像头信息 */
// const cameraClick = async (data: any,index:any) => {
//   let res = await getCameraVideoUrl({
//     id: data.camera_id,
//   });
//   if (index >= 2 ) {

//     // Bus.$emit("openVideo", res);
//   }
// };

const returnCameraIndex = (data: any) => {
  if (!data) {
    return;
  }
  let coordinate = data.coordinate || "";
  let left = coordinate.split(",")[0];
  let top = coordinate.split(",")[1];
  return { top: `${top}px`, left: `${left}px` };
};
const doubleclick = (event: any) => {
  isBig.value = !isBig.value;
  if (!isBig.value) {
    setMap();
    return;
  }
  let offsetX = event.offsetX;
  let offsetY = event.offsetY;
  let mapBlock: any = document.querySelector(".map-block");
  let mapId: any = document.querySelector(".map-id");
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let left = -event.offsetX + mapBlockWidth / 2;
  let top = -event.offsetY + mapBlockHeight / 2;
  setTimeout(() => {
    if (left > 0) left = 0;
    if (left < mapBlockWidth - mapIdWidth) left = mapBlockWidth - mapIdWidth;
    if (top > 0) top = 0;
    if (top < mapBlockHeight - mapIdHeight) top = mapBlockHeight - mapIdHeight;
    mapId.style.transform = `scale(${1})`;
    mapId.style.left = `${left}px`;
    mapId.style.top = `${top}px`;
  }, 100);
  mapId.oncontextmenu = function () {
    return false;
  };

  mapId.addEventListener("mousedown", function (event: any) {
    event.stopPropagation();
    var code = event.which;
    if (code != 3 || !isBig.value) {
      return;
    }
    let left = parseInt(mapId.style.left);
    let top = parseInt(mapId.style.top);
    let ol = event.clientX;
    let ot = event.clientY;
    document.onmousemove = function (ev) {
      let l = left + ev.clientX - ol;
      let t = top + ev.clientY - ot;
      if (l > 0) l = 0;
      if (l < mapBlockWidth - mapIdWidth) l = mapBlockWidth - mapIdWidth;
      if (t > 0) t = 0;
      if (t < mapBlockHeight - mapIdHeight) t = mapBlockHeight - mapIdHeight;
      mapId.style.left = l + "px";
      mapId.style.top = t + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
    };
  });
};
const setMap = () => {
  let mapBlock: any = document.querySelector(".map-block");
  let mapId: any = document.querySelector(".map-id");
  mapId.style.opacity = 1;
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let zoomVal = mapBlockWidth / mapIdWidth;
  let left = (mapBlockWidth - mapIdWidth) / 2;
  let top = (mapBlockHeight - mapIdHeight) / 2;
  mapId.style.transform = `scale(${zoomVal})`;
  mapId.style.left = `${left}px`;
  mapId.style.top = `${top}px`;
  mapId.oncontextmenu = function () {
    return false;
  };
};

const screenData = ref<any>([]);
const ngList = ref<any>();
const ngListCarmeta = ref<any>();
const imageList = ref<any>([]);

// 最近5条数据
const getDetection = async () => {
  let res = await detection({
    page: 1,
    isNg: 1,
    pageSize: 20,
  });
  console.log('最近5条',res);
  if (res.result == "success") {
    ngList.value = res.ngList;
    ngListCarmeta.value = res.ngList;
    screenData.value = res.screenData;
    imageList.value = res.screenData;
  }
};
const imageListitems = ref<any>({})
const imageListitem = (item: any) => {
  imageListitems.value = item
  phonedialogVisible.value = true
};
const cameraClickNgList = (data: any, index: any) => {
  cameraClick(data, index);
  ngListCarmeta.value.splice(index, 1);
};
const openImage = (data: any) => {
  Bus.$emit("openVideo", {
    video_url: data.video_url,
  });
};
const handleCurrentChange = async (page: number) => {
  detectionLogForm.page = page;
  getWarningList();
};

// 今日预警数据
const warningList = ref<any>([]);
const detectionLogTatal = ref(0);
const getWarningList = async () => {
  let res = await detectionLog({
    type: "today",
    ...detectionLogForm.value,
    startTime: dateday.value + ' ' + '00:00:01',
    endTime :dateday.value + ' ' + '23:59:59',
    // startTime:"2022-10-20 00:00:01",
    // endTime :"2022-10-20 23:59:59",
  });
console.log('res',res);
console.log('dateday',dateday.value);

  if (res.result == "success") {
    warningList.value = res.list;
    detectionLogTatal.value = Number(res.total);
  }
};
onBeforeUnmount(() => {
  Bus.$off("detectionIntervalTime");
});
onMounted(() => {
  nowDate(b)
  detectionlistLogs();
  getDetection();
  getWarningList();

  getAllCameraList();
  getCameraList();
  setTimeout(() => {
    setMap();
  }, 500);
  Bus.$on("detectionIntervalTime", () => {
    getDetection();
  });
});

const phonedialogVisible = ref(false);
const phonedialog = ref(false);
const tablee = (page: number) => {};
const phonehandleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
// 视频弹窗
const videoClick = (item: any) => {
  phonedialog.value = true;
  indexitem.value = item;
};

//改动
const indexitem = ref<any>({});

// const tips = (index: any) => {

//   indexitem.value.dian = list[index].dian;
//   indexitem.value.name = list[index].name;
//   indexitem.value.img = list[index].img;
//   indexitem.value.video = list[index].video;
//   indexitem.value.time = list[index].time;
//   indexitem.value.shi = list[index].shi;
// };

const list = reactive([
  {
    img: imagge,
    video: mp4a,
    time: "2022-08-23 17:50:24",
    dian: "1254,1550",
    name: "三号门",
    shi: "是否头盔,是否反光衣",
  },
  {
    img: imagge,
    video: mp4b,
    time: "2022-08-23 17:50:24",
    dian: "1254,1550",
    name: "二号门",
    shi: "是否头盔,是否反光衣",
  },
  {
    img: imagge,
    video: mp4c,
    time: "2022-08-23 17:50:24",
    dian: "1254,1550",
    name: "一号门",
    shi: "是否头盔,是否反光衣",
  },
  {
    img: imagge,
    video: mp4d,
    time: "2022-08-23 17:50:24",
    dian: "1254,1550",
    name: "四号门",
    shi: "是否头盔,是否反光衣",
  },
  {
    img: imagge,
    video: mp4d,
    time: "2022-08-23 17:50:24",
    dian: "1254,1550",
    name: "四号门",
    shi: "是否头盔,是否反光衣",
  },
]);
/* 获取单个摄像头信息 模拟异常 */
const yichangyujing = ref({
  img: imagge,
  video: mp4a,
  time: "2022-08-23 17:50:24",
  dian: "1254,1550",
  name: "三号门",
  shi: "未戴头盔",
});
const yichang = ref(false);
// const cameraClick =  (data: any,index:any) => {

//   if (index <= 2 ) {
//     yichang.value = true;
//   }
// };
const cameraClick = async (data: any, index: any) => {
  let res = await getCameraVideoUrl({
    id: data.camera_id,
  });
  if (index > 2) {
    Bus.$emit("openVideo", res);
  } else {
    yichang.value = true;
  }
};

// 今日预警
const detectionlistLogs = async () => {
  let res = await detectionlistLog({});
};

// 视频播放
// let audio = document.getElementById('pavideo')
// var myVideo = document.getElementById("video1");
const video1 = ref<any>(null);

const closevideo = () => {
  video1.value.pause();
};

// 获取当天日期
const dateday = ref<any>('')
var a = new Date().getTime(); //获取到当前时间戳
	var b = new Date(a); //创建一个指定的日期对象

	 function nowDate(now:any) {
		var year = now.getFullYear(); //年份
		var month = now.getMonth() + 1; //月份（0-11）
		var date = now.getDate(); //天数（1到31）
		var hour = now.getHours(); //小时数（0到23）
		var minute = now.getMinutes(); //分钟数（0到59）
		var second = now.getSeconds(); //秒数（0到59） 
		return (
			  year + "-" + month + "-" + date
		)
    
    
	};
  dateday.value = nowDate(b)

  // 视频测试
 
  // 视频测试
  
</script>

<template>

<!-- 视频测试 -->

<!-- 视频测试 -->

  <div class="warning_visual-page">
    <div class="visual-left">
      <div class="map-block-box">
        <div class="map-block">
          <!-- <div class="map-loading">地图加载中...</div> -->
          <div class="map-id" style="opacity: 1" @dblclick="doubleclick">
            <img class="map-image" src="@/assets/image/home/map.png" alt="" />
            <div
              class="index-point"
              :key="index"
              :title="c.camera_name"
              v-for="(c, index) in cameraList"
              @click="cameraClick(c, index)"
              :style="returnCameraIndex(c)"
            >
              <!--  <img src="../image/gif/index2.gif"> -->

              <div class="camera-hover">
                <img src="@/assets/image/home/camera.png" v-if="index >= 3" />

                <!-- <el-tooltip
                class="box-item"
                effect="dark"
                :content="c.action_list"
                placement="left"
              > -->
                <img src="@/assets/image/home/camera1.png" v-if="index < 3" />
                <div class="camera-text" v-if="index < 3">异常</div>
                <!-- </el-tooltip> -->
              </div>
            </div>
            <div
              class="index-point"
              v-for="(c, index) in ngListCarmeta"
              :key="index"
              @click="cameraClickNgList(c, index)"
              :style="returnCameraIndex(c.cameraInfo)"
            >
              <!-- <img src="@/assets/image/gif/index2.gif" /> -->
            </div>
          </div>
        </div>
      </div>

      <div class="warning-images">
        <el-image @click="imageListitem(item)"
              style="width: 24%; height: 100%"
              :src="item.image_url"
              v-for="(item, index) in imageList"
              :key="index"
            />
        <!-- <img
          class="warning-images-img"
          src="@/assets/image/Snipaste_2022-09-07_17-09-49.png"
          v-for="(item, index) in list"
          @click="phonedialogVisible = true"
          alt=""
          :key="index"
        /> -->
      </div>
      <!-- 异常模拟 -->
      <el-dialog
        v-model="yichang"
        title="预警内容"
        width="1050px"
        @close="closevideo"
      >
        <div>
          <div class="content">
            <div class="content-top">
              <div><text>时间：</text>{{ yichangyujing.time }}</div>
              <span></span>
              <div><text>点位：</text>{{ yichangyujing.dian }}</div>
              <span></span>
              <div><text>摄像头：</text>{{ yichangyujing.name }}</div>
            </div>
            <div class="content-con">
              <text>事件：</text>{{ yichangyujing.shi }}
            </div>
          </div>
        </div>
        <div class="content-buttom">
          <img
            :src="yichangyujing.img"
            style="width: 47%; height: 300px"
            alt=""
          />
          <video
            ref="video1"
            controls
            :src="yichangyujing.video"
            style="width: 520px; height: 300px; border: 1px solid #318ca2"
          ></video>
        </div>
      </el-dialog>

      <!-- 图片的弹窗 -->
      <el-dialog
        v-model="phonedialogVisible"
        title="预警内容"
        width="1050px"
        @close="closevideo"
      >
        <div>
          <div class="content">
            <div class="content-top">
              <div><text>时间：</text>{{ imageListitems.gmt_create }}</div>
              <span></span>
              <div><text>点位：</text>{{ imageListitems.detection_log_id }}</div>
              <span></span>
              <div><text>摄像头：</text>{{ imageListitems.camera_ip }}</div>
            </div>
            <div class="content-con">
              <text>事件：</text>{{ imageListitems.action }}
            </div>
          </div>
        </div>
        <div class="content-buttom">
          <img :src="imageListitems.image_url" style="width: 47%; height: 300px" alt="" />
          <video
            ref="video1"
            controls
            src="http://192.168.1.28/public/video/mm.mp4"
            style="width: 520px; height: 300px; border: 1px solid #318ca2"
          ></video>
        </div>
      </el-dialog>
      <!-- 视频弹窗 -->
      <el-dialog
        v-model="phonedialog"
        title="预警内容"
        width="1050px"
        @close="closevideo"
      >
        <!-- <div class="content-buttom">
          <video
            ref="video1"
            controls
            @click="videoClick"
            :src="indexitem.video"
            style="width: 100%; border: 1px solid #318ca2"
          ></video>
        </div> -->

        <div>
          <div class="content">
            <div class="content-top">
              <div><text>时间：</text>{{ indexitem.gmt_create }}</div>
              <span></span>
              <div><text>点位：</text>{{ indexitem.detection_log_id }}</div>
              <span></span>
              <div><text>摄像头：</text>{{ indexitem.camera_ip }}</div>
            </div>
            <div class="content-con">
              <text>事件：</text>{{ indexitem.action }}
            </div>
          </div>
        </div>
        <div class="content-buttom">
          <img
            :src="indexitem.image_url"
            style="width: 47%; height: 300px"
            alt=""
          />
          <video
            ref="video1"
            controls
            src="http://192.168.1.28/public/video/mm.mp4"
            style="width: 520px; height: 300px; border: 1px solid #318ca2"
          ></video>
        </div>
      </el-dialog>
    </div>
    <div class="visual-right">
      <app-box class="today-block" title="今日预警">
        <div
          v-for="(item, index) in warningList"
          class="today-content"
          :key="index"
          @click="videoClick(item)"
        >
          <div class="today-left">
            <!-- <img src="@/assets/image/Snipaste_2022-09-07_17-09-49.png" style="width:100%;border: 1px solid #318ca2;" alt="" @click="cameraClick(c)"> -->
            <!-- <video
              @click="videoClick(index)"
              :src="item.video_url"
              style="width: 70px;height: 100%;"
            ></video> -->
            <img
              style="width: 70px; height: 50px"
              :src="item.image_url"
              alt=""
            />
          </div>
          <div class="today-right">
            <div class="text"><text>时间：</text>{{ item.gmt_create }}</div>
            <div class="text"><text>摄像头：</text>{{ item.camera_ip }}</div>
            <div class="text" :title="item.action">
              <text>事件：</text>{{ item.action }}
            </div>
          </div>
        </div>
      </app-box>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.video{
    width: 100%;
    height: 100%;
    margin: auto;
}
.warning_visual-page {
  width: 100%;
  height: 100%;
  display: flex;

  .visual-left {
    width: 100%;
    background-color: #070707;
    flex: 1;

    .camera-hover .hover {
      display: none;
      position: relative;
    }

    .camera-hover:hover .hover {
      display: block;
    }

    .map-block-box {
      height: 80%;
    }
    .map-block {
      height: 100%;
      width: 100%;
      overflow: hidden !important;
      position: relative;
    }

    .warning-images {
      height: calc(20% - 10px);
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .warning-images-img {
        width: calc(20% - 8px);
      }
    }

    .map-id {
      display: inline-block;
      position: absolute;
      cursor: pointer;
    }

    .map-loading {
      color: #fff;
      position: absolute;
      left: 0;
      width: 100%;
      top: 50%;
      text-align: center;
    }

    .map-id .index-point {
      width: 0;
      height: 0;
      position: absolute;
    }

    .map-id .index-point img {
      position: absolute;
      width: 144px;
      left: -144px;
      bottom: 0;
    }
  }

  .visual-right {
    height: 100%;
    width: 300px;
    margin-left: 10px;
  }

  .search-block {
    .info {
      height: 270px;
      padding: 16px;
    }

    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16px;
    }

    input {
      outline: none;
      padding: 0 10px;
      width: 308px;
      height: 32px;
      background: rgba(27, 154, 226, 0.1);
      border-radius: 4px;
      border: 1px solid rgba(0, 180, 255, 0.16);
      color: #fff;
    }

    .search .button-green {
      width: 88px;
      height: 32px;
    }

    .info-tree {
      overflow: auto;
      height: 180px;
      background: rgba(27, 154, 226, 0.1);
    }

    .user-tree {
      background: none;
      color: #fff;

      .el-tree-node__expand-icon.is-leaf {
        opacity: 0;
      }
    }

    .user-tree .el-tree-node.is-current > .el-tree-node__content {
      background-color: #3aa2ad !important;
    }

    .user-tree .el-tree-node:focus > .el-tree-node__content {
      background-color: #3aa2ad !important;
    }

    .user-tree .el-tree-node__content:active {
      background-color: #3aa2ad !important;
    }

    .user-tree .el-tree-node__content:hover {
      background-color: #3aa2ad !important;
    }
  }

  .today-block {
    height: calc(100%);

    .concise-cameraList {
      height: calc(100% - 80px);
      overflow-y: auto;
    }

    .concise-ngList {
      height: 100%;
      overflow: auto;
      font-size: 14px;
    }

    .ngList-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding: 10px 0;

      .ngList-item-image {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 60px;
        height: 60px;
        border: 1px solid #3ba4ba;
      }

      .ngList-item-desc {
        text-align: left;
        flex: 1;
        margin-left: 5px;
      }

      .button-green {
        width: 88px;
        height: 36px;
      }
    }
  }
}

.content-top {
  display: flex;
  width: 100%;
  font-size: 16px;
}

.content-top text {
  color: #3984ec;
  font-size: 16px;
}

.content-top div:nth-child(1) {
  // background: red;
  width: 30%;
}

.content-top div:nth-child(2) {
  // background: red;
  width: 30%;
}

.content-top div:nth-child(3) {
  // background: red;
  width: 20%;
}

.content-top span {
  width: 5%;
  // border-left: 1px solid rgb(245, 189, 35);
}

.content-con {
  margin-top: 5px;
  font-size: 16px;
}

.content-con text {
  color: #3984ec;
  font-size: 16px;
}

.content-buttom {
  margin-top: 20px;
  display: flex;
}

.content-buttom img {
  margin-right: 10px;
}

.text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: 12px;
}
.text text {
  color: #4c6c98;
  margin-right: 5px;
}
.today-content {
  display: flex;
  padding-top: 10px;
}
.today-left {
  width: 25%;
}
.today-right {
  width: 70%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.camera-text {
  width: 100px;
  font-size: 28px;
  color: #ff0707;
  position: absolute;
  top: -50px;
  left: 10px;
}
</style>
<style scoped>
  .video{
    width: 100%;
    height: 100%;
    margin: auto;
  }
</style>
<style>
.video .vjs_video_3-dimensions.vjs-fluid {
  padding-top: 57%;
}
.video .vjs-custom-skin > .video-js .vjs-big-play-button {
    /* background-color: rgba(0,0,0,0.45); */
    font-size: 3.5em;
    border-radius: 50%;
    height: 2em !important;
    width: 2em !important;
    line-height: 2em !important;
    margin-top: -1em !important;
    margin-left: -1em
}
.video .vjs-poster{
background-position:center
}
</style>
